<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="baidu-site-verification" content="Vy5Y37FCpH" />
    <title>${house.tkdTitle}</title>
    <meta name="keywords" content="${house.tkdKeywords}">
    <meta name="description"  content="${house.tkdDesc}">
    <!--请在这里更换 favicon-->
    <link rel="shortcut icon" href="img/favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/zico.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/pageCss/base.css">
    <link rel="stylesheet" href="css/pageCss/details.css">
    <script>
        //百度统计
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");

            hm.src = "https://hm.baidu.com/hm.js?35fa6b5daf10a4065cab1f14e9bfd1e2";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-150530945-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-150530945-1');
    </script>
</head>
<body>
<div id="house_detail" v-cloak>
    <!--导航栏-->
    <nav class="container-fluid navbar p-0 navbar-expand-lg bg-navbar d-lg-flex d-xl-flex d-none d-sm-none d-md-none">
        <div class="navbar container px-0">
            <a href="index.html" class="navbar-brand mr-5">
                <img src="img/pc/home/logo.png" alt="">
            </a>
            <a href="index.html" class="nav-item nav-link text-white ml-5 home"><h5 class="navbar-text">首页</h5></a>
            <a href="globalHouse.html" class="nav-item nav-link text-white navActive"><h5 class="navbar-text">精品房源</h5>
            </a>
            <div class="position-relative tagger-menu">
                <a href="information.html?type=5" class="nav-item nav-link text-white">
                    <h5 class="navbar-text">经纪团队</h5>
                </a>
                <ul class="menu-list">
                    <li class="menu-list-content" v-for="item in menuData.brokeTeam">
                        <a :href="'information.html?type=5&menuCol='+item.dictValue" class="menu-list-content-a">{{item.dictLabelOrig}}</a>
                    </li>
                </ul>
            </div>
            <div class="position-relative tagger-menu">
                <a href="information.html?type=2" class="nav-item nav-link text-white">
                    <h5 class="navbar-text">咨讯百科</h5>
                </a>
                <ul class="menu-list">
                    <li class="menu-list-content" v-for="item in menuData.inforMation">
                        <a :href="'information.html?type=2&menuCol='+item.dictValue" class="menu-list-content-a">{{item.dictLabelOrig}}</a>
                    </li>
                </ul>
            </div>
            <div class="position-relative tagger-menu">
                <a href="information.html?type=3" class="nav-item nav-link text-white">
                    <h5 class="navbar-text">新闻动态</h5>
                </a>
                <ul class="menu-list">
                    <li class="menu-list-content" v-for="item in menuData.news">
                        <a :href="'information.html?type=3&menuCol='+item.dictValue" class="menu-list-content-a">{{item.dictLabelOrig}}</a>
                    </li>
                </ul>
            </div>
            <a href="contact.html" class="nav-item nav-link text-white "><h5 class="navbar-text">联系我们</h5></a>
        </div>
    </nav>
    <!--导航栏--移动站-->
    <nav class="bg-navbar d-xl-none d-lg-none d-md-block d-sm-block mask-ele">
        <a href="index.html" class="navbar-brand vertical-middle mr-5">
            <img src="img/pc/home/logo.png" alt="">
        </a>
        <a class="menu" href="#"><i class="zi zi_alignjustify iBigSize mobile-nav-i clearfix float-right text-white"></i></a>
    </nav>
    <div class="mask position-fixed"></div>
    <ul class="list-group list-group-flush container-fluid p-0 modal-box-ul mask-ele position-absolute">
        <li class="list-group-item border-0 modal-box-ul-li-bg">
            <a href="index.html" class="mx-3 px-2 py-1 border-bottom d-block text-white noDecoration">首页</a>
        </li>
        <li class="list-group-item border-0 modal-box-ul-li-bg">
            <a href="globalHouse.html" class="mx-3 px-2 py-1 border-bottom d-block text-white noDecoration">精品房源</a>
        </li>
        <li class="list-group-item border-0 modal-box-ul-li-bg">
            <a href="information.html?type=5"
               class="mx-3 px-2 py-1 d-block border-bottom text-white noDecoration">经纪团队
            </a>
            <ul class=" list-unstyled pl-4">
                <li v-for="item in menuData.brokeTeam">
                    <a :href="'information.html?type=5&menuCol='+item.dictValue"
                       class="mx-3 px-2 py-1 border-bottom d-block text-white noDecoration">{{item.dictLabelOrig}}</a>
                </li>
            </ul>
        </li>
        <li class="list-group-item border-0 modal-box-ul-li-bg">
            <a href="information.html?type=2"
               class="mx-3 px-2 py-1 border-bottom d-block text-white noDecoration">咨讯百科</a>
            <ul class=" list-unstyled pl-4">
                <li v-for="item in menuData.inforMation">
                    <a :href="'information.html?type=2&menuCol='+item.dictValue"
                       class="mx-3 px-2 py-1 border-bottom d-block text-white noDecoration">{{item.dictLabelOrig}}</a>
                </li>
            </ul>
        </li>
        <li class="list-group-item border-0 modal-box-ul-li-bg">
            <a href="information.html?type=3"
               class="mx-3 px-2 py-1 border-bottom d-block text-white noDecoration">新闻动态</a>
            <ul class=" list-unstyled pl-4">
                <li v-for="item in menuData.news">
                    <a :href="'information.html?type=3&menuCol='+item.dictValue"
                       class="mx-3 px-2 py-1 border-bottom d-block text-white noDecoration">{{item.dictLabelOrig}}</a>
                </li>
            </ul>
        </li>
        <li class="list-group-item border-0 modal-box-ul-li-bg">
            <a href="contact.html" class="mx-3 px-2 py-1 d-block text-white noDecoration">联系我们</a>
        </li>
    </ul>
    <!--当前位置-->
    <div class="container currentPosition px-0 py-2 mt-4 d-none d-sm-block d-md-block d-lg-block d-xl-block">
        <span>您当前的位置:</span>
        <a href="index.html" class="noDecoration">首页</a>
        <span class="px-2">&gt;</span>
        <a href="globalHouse.html" class="noDecoration">精品房源</a>
    </div>
    <!--详细信息-->
    <div class="container clearfix detailsMessage mt-3 px-0 d-sm-flex d-none justify-content-between">
        <div id="carouselExampleControls"
             class="carousel carouselMessage slide d-none d-sm-block d-md-block d-lg-block d-xl-block col-6"
             data-ride="carousel">
            <div class="carousel-inner">
                <#list house.pics?split("|") as item>
                    <div class="carousel-item ${(item_index == 0)?string('active','')}" >
                        <img class="d-block w-100 carouselMain-img" src="${item}" alt="First slide">
                    </div>
                </#list>

                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <!--下方小图标-->
            <ul class="clearfix pl-xl-2 pl-lg-1 pl-md-1 pl-sm-1 mt-2 mb-0 justify-content-around d-none d-sm-flex d-md-flex d-lg-flex d-xl-flex float-left carousel-listImg">
                <#list house.pics?split("|") as item>
                    <li class="">
                        <a href="javascript:;">
                            <img src="${item}"></a>
                    </li>
                </#list>
            </ul>
        </div>
        <div class="card border-0 col-6">
            <div class="card-body p-1">
                <h3 class="card-title">${house.title}</h3>
                <h3 class="card-subtitle text-danger">${house.price}</h3>
                <div class="mt-3 clearfix">
                    <a class="float-left w-50 noDecoration">管理费用 :
                        <span>${house.managePrice}</span>
                    </a>
                    <a class="float-left w-50 noDecoration ">投资回报 :
                        <span style="color: red">${house.rateOfReturn!'-'}%</span>
                    </a>
                    <a class="float-left w-50 noDecoration">平米单价 :
                        <span>${house.propertyTypeStr}</span>
                    </a>
                    <a class="float-left w-50 noDecoration">户型格局 :
                        <span>${house.houseType}</span>
                    </a>
                    <a class="float-left w-50 noDecoration">室内面积 :
                        <span>${house.indoorArea}㎡</span>
                    </a>
                    <a class="float-left w-50 noDecoration">土地面积 :
                        <span>${house.buildArea}㎡</span>
                    </a>
                    <a class="float-left w-50 noDecoration">土地权利 :
                        <span>${house.landRightsStr}</span>
                    </a>
                    <a class="float-left w-50 noDecoration">目前状况 :
                        <span>${house.currentStatusStr}</span>
                    </a>
                    <a class="float-left w-100 noDecoration">物件地址 :
                        <span>${house.addr}</span>
                    </a>
                    <a class="float-left w-100 noDecoration">交通线路 :
                        <span>${house.transportLine}</span>
                    </a>
                </div>
                <ul class="p-0 mt-3 clearfix">
                    <li class="float-left mr-3"><img id="cord" src="img/pc/home/wechat.png" alt=""></li>
                    <li class="float-left bg-danger text-white p-2 class=mb-0 col-6">
                        <p class="mb-0">微信扫码 免费咨询</p>
                        <p class="mb-0">电话 : <span id="phone">+81 03-6273-0347</span></p>
                        <p class="mb-0">邮箱 : <span id="email">johonxb@yahoo.co.jp</span></p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="swiper-container d-block d-sm-none">
        <div class="swiper-wrapper">
            <#list house.pics?split("|") as item>
            <div class="swiper-slide" >
                <img class="d-block w-100" src="${item}" alt="Third slide">
            </div>
            </#list>

        </div>
        <div class="swiper-pagination"></div>
    </div>
    <!--详细信息--移动端--信息-->
    <div class="container mt-3 d-block d-sm-none mobile-detailsMessage">
        <h3>${house.title}</h3>
        <h3 class="text-danger">${house.price}</h3>
        <div class="clearfix">
            <a class="w-100 d-block float-left">管理费用 :
                <span>${house.managePrice}</span></a>
            <a class="w-100 d-block float-left ">投资回报 : <span style="color: red">${house.rateOfReturn!'-'}%</span></a>
            <a class="w-100 d-block float-left">平米单价 : <span>${house.propertyTypeStr}</span></a>
            <a class="w-100 d-block float-left">户型格局 : <span>${house.houseType}</span></a>
            <a class="w-100 d-block float-left">室内面积 : <span>${house.indoorArea}㎡</span></a>
            <a class="w-100 d-block float-left">土地面积 : <span>${house.buildArea}㎡</span></a>
            <a class="w-100 d-block float-left">土地权利 : <span>${house.landRightsStr}</span></a>
            <a class="w-100 d-block float-left">目前状况 : <span>${house.currentStatusStr}</span></a>
            <a class="w-100 d-block float-left">物件地址 : <span>${house.addr}</span></a>
            <a class="w-100 d-block float-left">交通线路 : <span>${house.transportLine}</span></a>
        </div>
        <ul class="p-0 clearfix">
            <li class="float-left mr-0"><img id="cord1" src="img/pc/home/wechat.png" alt=""></li>
            <li class="float-left bg-danger text-white py-2 px-2 mb-0">
                <p class="mb-0">微信扫码 免费咨询</p>
                <p class="mb-0">电话 : <span id="phone1">+81 03-6273-0347</span></p>
                <p class="mb-0">邮箱 : <span id="email1">johonxb@yahoo.co.jp</span></p>
            </li>
        </ul>
    </div>
    <!--物件信息-->
    <div class="container px-0 mt-4 d-none d-sm-block itemMessage">
        <h3>物件信息</h3>
        <div class="mb-3 blackGrayLine"></div>
        <div class="clearfix">
            <a class="float-left noDecoration">建筑年月 :<span>${house.buildDate?string('yyyy/MM/dd')}</span></a>
            <a class="float-left noDecoration">建筑构造 :<span>${house.buildConstructionStr}</span></a>
            <a class="float-left noDecoration">楼层结构 :<span>${house.floorConstruction}</span></a>
            <a class="float-left noDecoration">所在楼层 :<span>${house.floorsPos}层</span></a>
            <a class="float-left noDecoration">月管理费 :<span>${house.monthManagePrice!'-'}</span></span>
            </a>
            <a class="float-left noDecoration">月修善费 :<span>${house.monthRepairPrice!'-'}</span></a>
        </div>
    </div>
    <!--物件信息--移动端-->
    <div class="container mt-4 d-block d-sm-none mobile-itemMessage">
        <h3>物件信息</h3>
        <div class="mb-3 blackGrayLine"></div>
        <div class="clearfix">
            <a class="float-left noDecoration">建筑年月 :<span>${house.buildDate?string('yyyy/MM/dd')}</span></a>
            <a class="float-left noDecoration">建筑构造 :<span>${house.buildConstructionStr}</span></a>
            <a class="float-left noDecoration">楼层结构 :<span>${house.floorConstruction}</span></a>
            <a class="float-left noDecoration">所在楼层 :<span>${house.floorsPos}层</span></a>
            <a class="float-left noDecoration">月管理费 :<span>${house.monthManagePrice!'-'}</span></a>
            <a class="float-left noDecoration">月修善费 :<span>${house.monthRepairPrice!'-'}</span></a>

        </div>
    </div>
    <!--物件描述-->
    <div class="container px-sm-0 mt-4 itemDescription">
        <h3>物件描述</h3>
        <div class="mb-3 blackGrayLine"></div>
        <div>
            ${house.content}
        </div>
    </div>
    <!--物件位置-->
    <div class="container px-sm-0 mt-3 mb-4 mb-xl-0 mb-lg-0 mb-md-0 mb-sm-0 itemPosition">
        <h3>物件位置</h3>
        <div class="mb-3 blackGrayLine"></div>
        <!-- 图片不居中好看些吧 modify by zym -->
        <!-- 删除text-center样式 -->
        <div class="" id="container">
            <img src="${house.addrPic}" class="img-responsive"/>
        </div>
    </div>
    <!--买房问答-->
    <div class="container px-0 mt-5 question d-sm-block">
        <h3>买房问答</h3>
        <div class="mb-3 blackGrayLine"></div>
        <div v-for="item in questions">
            <div class="clearfix d-flex justify-content-between">
                <span class="bg-danger text-center text-white d-block mr-2">问</span>
                <p class="col-11">
                    {{item.question}}
                </p>
            </div>
            <div class="clearfix mt-2 d-flex justify-content-between">
                <span class="bg-primary text-center text-white mr-2">答</span>
                <p class="col-11">
                    {{item.answer | cutOut}}
                    <a :href="'question.html?id='+item.id" class="text-danger noDecoration">...详细&gt;&gt;</a>
                </p>
            </div>
        </div>
    </div>
</div>
<div id="message" v-cloak>
    <!--在线留言-->
    <msg-content></msg-content>
</div>
<script src="js/tools/jquery-3.3.1.min.js"></script>
<script src="js/tools/popper.min.js"></script>
<script src="js/tools/bootstrap.min.js"></script>
<script src="js/tools/swiper.min.js"></script>
<script src="js/tools/vue.min.js"></script>
<script src="js/tools/vue-resource.js"></script>
<script src="common/base.js"></script>
<script src="js/tools/illya.tool.js"></script>
<script>
    var house_detail = new Vue({
        el: "#house_detail",
        data:{
            questionUrl:"api/sys/question/random",
            menuUrl: "api/sys/index/menuCol",
            menuData:{},
            houseDetail:{},
            questions:{},
            id:""
        },
        mounted:function () {
            this.getInfoContent();
        },
        updated: function () {//数据加载完触 发
            //加载完图片，开始处理轮播
            this.swiperStart();
            menu_hover();
            // 修改富文本中图片，做响应式处理
            $(".itemDescription img").addClass("img-responsive");
        },
        methods: {
            getInfoContent:function () {
                this.$http.get(baseUrl + this.questionUrl).then(//随机2个问题
                    function (res) {
                        this.questions = res.data.data;
                    }
                ).catch(function (response) {
                    console.log(response)
                })

                this.$http.get(baseUrl + this.menuUrl).then(
                    function (res) {
                        this.menuData = res.data.data;
                    }
                ).catch(function (response) {
                    console.log(response)
                })
            },
            swiperStart: function () {//轮播图片处理
                //点击切换轮播
                var listImg = $('.carouselMessage').find('li');
                listImg.click(function () {
                    for (var i = 0; i < listImg.length; i++) {
                        $('.carouselMessage').carousel($(this).index());
                    }
                });
                //轮播图启动
                var mySwiper = new Swiper('.swiper-container', {
                    loop: true,
                    autoplay: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                });
            }
        },
        filters: {
            formatDate: function (val) {
                var value = new Date(val);
                var year = value.getFullYear();
                var month = padDate(value.getMonth() + 1);
                /*var day = house_detail.padDate(value.getDate());
                var hour = house_detail.padDate(value.getHours());
                var minutes = house_detail.padDate(value.getMinutes());
                var seconds = house_detail.padDate(value.getSeconds());*/
                return year + '年' + month + '月';
            },
            cutOut:function (val) {
                return val.substring(0,120);
            },
            formatNullStr:function (val) {
                if(!val){
                    return "-"
                }
                return val;
            }
        }
    })
</script>
</body>
</html>